<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<c:set var="path" value="${pageContext.request.contextPath }" />
<%@ taglib tagdir="/WEB-INF/tags" prefix="matrix"%>
<%@ taglib uri="http://matrixcsm.zkingsoft.com" prefix="cms"%>
<cms:ads   code="'ZY_HangKongHangTian_0',
'ZY_JunGongXingYe_1',
'ZY_QiCheQingLiangHua_2',
'ZY_YunDongQiCai_3',
'ZY_YingErTuiChe_4',
'img_$A_DB5',
'ZY_FuHeBan_6',
'img_XM3qu7',
'ZY_FuHeBan_8',
'img_UDbRW9',
'ZY_FuHeBan_10',
'img_nKkza11',
'ZY_FuHeBan_12',
'img_I_ZWB13',
'ZY_FuHeBan_14',
'img_rJWSw15',
'ZY_FuHeBan_16',
'img_BUFG817',
'ZY_FuHeBan_18',
'img_KZUNI19',
'ZY_FuHeBan_20',
'img_WEA0i21',
'ZY_FuHeBan_22',
'img_MLMev23',
'ZY_FuHeBan_24',
'img_$rOB425',
'ZY_FuHeBan_26',
'img_UyKzX27',
'ZY_FuHeBan_28',
'img_l$qUs29',
'ZY_FuHeBan_30',
'img_HFyxM31',
'ZY_FuHeBan_32',
'img_rKL3x33',
'ZY_FuHeBan_34',
'img_YBPAF35',
'ZY_FuHeBan_36',
'img_dC1Qb37',
'ZY_FuHeBan_38'
"  ></cms:ads>
<!doctype html>
<html>
 <head> 
  <meta charset="utf-8"> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
  <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"> 
  <meta content="telephone=no" name="format-detection"> 
  <meta content="yes" name="apple-mobile-web-app-capable"> 
  <link rel="icon" sizes="any" href="${浏览器logo}">
  <title>湖南佳拓新材料有限公司官网${网页标题}</title> 
  <link rel="stylesheet" type="text/css" href="https://hwfile.csxuncong.com/jkxc/mobile/./css/common.css"> 
  <link rel="stylesheet" type="text/css" href="https://hwfile.csxuncong.com/jkxc/mobile/css/animate.css"> 
  <link rel="stylesheet" type="text/css" href="https://hwfile.csxuncong.com/jkxc/mobile/./css/swiper-bundle.min.css"> 
  <style>.product-warp{ padding: 30px 15px; flex-wrap: wrap; } .product-warp .item{ width: 48%; text-align: center; } .product-warp .item img{ width: 100%; height: 140px; display: block; } .product-warp .item p{ font-size: 16px; margin: 15px 0; }</style> 
  <meta name="keywords" content="湖南佳拓新材料有限公司">
  <meta name="description" content="湖南佳拓新材料有限公司">
 </head> 
 <body> 
  <jsp:include page="_top.jsp"></jsp:include> 
  <div class="container"> 
   <ul id="header">
    <cms:artType code="hyyy" var="artTypeList"></cms:artType>
    <c:forEach items="${artTypeList }" var="artType" varStatus="status" >
     <li class="${status.index == 0} ? 'active animated wow fadeInDown' : 'animated wow fadeInDown'">${artType.artTypeName}</li>
    </c:forEach>
   </ul>
   <div id="content">
    <cms:artType code="hyyy" var="artTypeList"></cms:artType>
    <c:forEach items="${artTypeList }" var="artType" varStatus="status" >
    <div class="${status.index == 0 ? 'product-warp flex space-between' : 'product-warp none flex space-between'}">
     <cms:arts code="${artType.code}" var="artsList"></cms:arts>
     <c:forEach items="${artsList }" var="art" varStatus="status" >
     <div class="item animated wow fadeInUpA" data-wow-delay="0s">
      <a href="${path }/do/redirect/mobile/productDetail?id=${art.artId}">
       <img src="${art.artImage}" class="zy">
       <p class="zy">${art.artTitle}</p>
      </a>
     </div>
     </c:forEach>
    </div>
    </c:forEach>
   </div> 
  </div> 
  <jsp:include page="_footer.jsp"></jsp:include> 
  <script src="https://hwfile.csxuncong.com/jkxc/mobile/./js/swiper-bundle.min.js" type="text/javascript" charset="utf-8"></script> 
  <script src="https://hwfile.csxuncong.com/jkxc/mobile/./js/wow.min.js"></script> 
  <script>
			var swiper = new Swiper('.mySwiper', {
				loop:true,
				slidesPerView:1,
				autoplay : true,
				pagination: {
					el: ".swiper-pagination",
					type: "bullets",
				},
			});
			function showPopup() {
				var popBg = document.getElementById("popBg");
				var popBox = document.getElementById("popBox");
				popBox.style.animation = "popup 1s"
				popBg.style.display = "block";
				popBox.style.display = "block";	
			};
			/*点击关闭按钮*/
			function closePopup() {
				var popBg = document.getElementById("popBg");
				var popBox = document.getElementById("popBox");
				popBox.style.transition = '1s'
				popBg.style.display = "none";
				popBox.style.display = "none";						
			}
			
			
			var header=document.getElementById('header').children;
			var content=document.getElementById('content').children;
			for(var i=0;i<content.length;i++){
				//存储i的值  相当于oul的第一个子元素等于con的第一个子元素  (通俗来说就是一一对应)
				header[i].index=i;
				//循环设置点击事件
				header[i].onclick=function(){
					for(var i=0;i<content.length;i++){
						content[i].style.display="none";
						header[i].className = ''
					}
					//this指的是事件前的对象  (ali[i].index=i)
					content[this.index].style.display='flex';
					header[this.index].className = 'active'
				}
			}
			
			var wow = new WOW({
			    boxClass: 'wow',
			    animateClass: 'animated',
			    offset: 0,
			    mobile: true,
			    live: true
			});
			wow.init();
		</script>   
 </body>
</html>